<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-people"></i> 企业管理</el-breadcrumb-item>
                <el-breadcrumb-item>创建企业</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form :model="form" :rules="rules" ref="form" label-width="200px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="主要负责人" prop="adminUserId">
                    <el-select v-model="form.adminUserId" style="width:100%;">
                        <el-option
                        v-for="item in userlist"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在省" prop="addressProvinceId">
                    <el-select v-model="form.addressProvinceId" @change="handlePronvice" style="width:100%;">
                        <el-option
                        v-for="item in provincelist"
                        :key="item.code"
                        :label="item.name"
                        :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在市" prop="addressCityId">
                    <el-select v-model="form.addressCityId" @change="handleCity" style="width:100%;"> 
                         <el-option
                        v-for="item in citylist"
                        :key="item.code"
                        :label="item.name"
                        :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在区县" prop="addressCountyId">
                    <el-select v-model="form.addressCountyId" style="width:100%;">
                        <el-option
                        v-for="item in countrylist"
                        :key="item.code"
                        :label="item.name"
                        :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="详细地址" prop="addressDetail">
                    <el-input type="textarea" v-model="form.addressDetail"></el-input>
                </el-form-item>
                <el-form-item label="海关注册代码" prop="customsRegCode">
                    <el-input  v-model="form.customsRegCode"></el-input>
                </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('form')">表单提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>
</template>

<script>
import {UserQuery} from '@/api/user';
import {QueryProvince,QueryCity,QueryCounty,CreateOrg,SettingAlipay} from '@/api/company';
    export default {
        name: 'baseform',
        data: function(){
            return {
                form: {
                    name: '',
                    adminUserId:'',
                    addressProvinceId: '',
                    addressCityId: '',
                    addressCountyId: '',
                    addressDetail: '',
                    customsRegCode: ''
                },
                rules:{
                     name: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ],
                    adminUserId:[
                        { required: true, message: '请选择主要负责人', trigger: 'change' }
                    ],
                    addressProvinceId:[
                        { required: true, message: '请选择所在省', trigger: 'change' }
                    ],
                    addressCityId:[
                        { required: true, message: '请选择所在市', trigger: 'change' }
                    ],
                    addressCountyId:[
                        { required: true, message: '请选择所在区', trigger: 'change' }
                    ],
                    addressDetail:[{ required: true, message: '请输入详细地址', trigger: 'blur' }],
                    customsRegCode:[{ required: true, message: '请输入海关注册代码', trigger: 'blur' }],
                },
                userlist:[],
                provincelist:[],
                citylist:[],
                countrylist:[]
            }
        },
        created() {
            this.init();
        },
        methods: {
            init(){
                this.UserQuery();
                this.QueryProvince();
            },
            UserQuery(){
                UserQuery({
                        resultType:"list",
                        enable: true,
                        fetchRoles: true
                    }).then(res=>{
                        this.userlist=res.data
                    })
            },
            QueryProvince(){
                QueryProvince({
                    resultType:"list", 
                }).then(res=>{
                    this.provincelist=res.data
                })
            },
            handlePronvice(e){
                QueryCity({
                    resultType:"list", 
                    provinceId:e,
                }).then(res=>{
                    this.citylist=res.data
                })
                this.form.addressCityId='';
                this.form.addressCountyId='';
            },
            handleCity(e){
                QueryCounty({
                    resultType:"list", 
                    cityId:e,
                }).then(res=>{
                    this.countrylist=res.data
                })
                this.form.addressCountyId='';
            },
            onSubmit(formName) {
                 this.$refs['form'].validate((valid) => {
                     console.log(valid)
                     if(valid){
                         CreateOrg(this.form).then(res=>{
                            if(res.code=="0"){
                                this.$message.success('创建成功')
                                Object.keys(this.form).forEach(key => this.form[key] = '');
                            }else{
                                this.$message.error(res.msg)
                            }
                        })
                     }
                 })
            }
        }
    }
</script>